<template>
  <div id="manager-user">
    <el-container style="height: 100vh; border: 1px">
      <!-- 头部信息 -->
      <el-header>
        <el-row>
          <el-col :span="2"
            ><div class="grid-content bg-purple">聘途</div></el-col
          >
          <el-col :span="2" :offset="20"
            ><div class="grid-content bg-purple">
              <el-button
                style="font-size: large; color: black"
                type="text"
                @click="Loginout"
                >退出登录</el-button
              >
            </div></el-col
          >
        </el-row>
      </el-header>
      <el-container>
        <!-- 左侧栏 -->
        <el-aside width="200px">
          <Sidebar></Sidebar>
        </el-aside>
        <!-- 主体 -->
        <el-main>
          <el-table :data="formattedTableData" height="900" style="width: 100%">
            <!-- 使用 v-for 遍历列配置数组 -->
            <el-table-column
              v-for="column in tableColumns"
              :key="column.prop"
              :prop="column.prop"
              :label="column.label"
              :width="column.width"
            >
            </el-table-column>
            <el-table-column label="个人简历">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="primary"
                  plain
                  @click="LookSeekerCv(scope.$index, scope.row)"
                  >查看</el-button
                >
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <!-- 弹窗 -->
          <el-dialog title="个人简历" :visible.sync="dialogTableVisible">
            <pre style="font-size: x-large">{{ seekercv }}</pre>
          </el-dialog>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
  
  <script>
import axios from "axios";
import Sidebar from "@/components/ManagerSidebar.vue";
export default {
  components: {
    Sidebar,
  },
  data() {
    return {
      seekercv: "",
      dialogTableVisible: false,
      tableData: [],
      tableColumns: [
        { prop: "sid", label: "ID", width: "180" },
        { prop: "susername", label: "用户名", width: "180" },
        { prop: "sname", label: "名称", width: "180" },
        { prop: "sedu", label: "学历", width: "180" },
        { prop: "sgender", label: "性别", width: "180" },
        { prop: "sphone", label: "电话", width: "180" },
        // { prop: "sinfo", label: "简历", width: "180" },
        // 可以根据需要定义更多列配置
      ],
    };
  },
  //   计算属性
  computed: {
    // 计算属性，将 sedu 转换为对应的学历字符串
    formattedTableData() {
      // 使用 map 方法遍历 tableData 数组，将 sedu 转换为对应的学历字符串
      return this.tableData.map((item) => {
        return {
          ...item, // 使用对象的展开语法复制所有原始属性
          sedu: this.convertSeduToString(item.sedu), // 调用方法将 sedu 转换为学历字符串
        };
      });
    },
  },

  created() {
    this.getUserList();
  },
  methods: {
    convertSeduToString(value) {
      switch (value) {
        case 1:
          return "小学";
        case 2:
          return "初中";
        case 3:
          return "高中";
        case 4:
          return "大学";
        case 5:
          return "研究生";
        case 6:
          return "博士";
        default:
          return ""; // 处理未知的 sedu 值
      }
    },
    getUserList() {
      axios
        .get("http://localhost:8080/hqdx/manager/showSeeker")
        .then((response) => {
          this.tableData = response.data.data.items;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    LookSeekerCv(index, row) {
      this.dialogTableVisible = true;
      let data = new FormData();
      data.append("sinfo", row.sinfo);
      axios
        .post("http://localhost:8080/hqdx/seeker/showSeekerCv", data)
        .then((response) => {
          this.seekercv = response.data.data.items;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    handleDelete(index, row) {
      this.deleteUser(row.sid);
    },
    deleteUser(sid) {
      const confirmDelete = confirm("确定要删除这个用户吗?");
      if (confirmDelete) {
        let data = new FormData();
        data.append("sid", sid);
        axios
          .post("http://localhost:8080/hqdx/manager/deleteSeeker", data) // 带上用户ID
          .then((response) => {
            this.getUserList();
            console.log("用户已删除");
          })
          .catch((error) => {
            console.log("删除失败:", error);
          });
      }
    },
    Loginout() {
      this.$router.push("/manage-login");
      sessionStorage.setItem("LoginManaState", JSON.stringify(false)); //退出登录，状态记录
    },
  },
};
</script>
  

<style scoped>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
}

body > .el-container {
  margin-bottom: 40px;
}
</style>
  